<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .white {
            color: white;
        }
    </style>
</head>

<body>
    <h1>
        <san>
            1.创建元素
        </san>
        <san>
            12.创建元素
        </san>
    </h1>
    <h1>
        <san>
            1.创建元素
        </san>
    </h1>
    <div class="box"></div>
    <a href="forEach语法.html">跳转</a>
    <script>
        const box = document.querySelector('.box')
        box.style.width = '400px'
        box.style.height = '400px'
        box.style.backgroundColor = 'pink'
        // 1.创建元素
        const div = document.createElement('div')
        div.classList.add('content')
        div.classList.add('white')
        // 2.添加元素
        div.innerHTML = '我是添加的元素'
        // 3.添加样式
        div.style.width = '100px'
        div.style.height = '100px'
        div.style.backgroundColor = 'red'
        box.appendChild(div)
        div.addEventListener('mouseenter', function () {
            div.style.backgroundColor = 'blue'
            div.style.width = '300px'
            div.style.height = '300px'
            box.style.margin = '100px auto'
        })
        div.addEventListener('mouseleave', () => {
            div.style.backgroundColor = 'yellow'
            div.style.color = 'red'
            div.style.width = '200px'
            div.style.height = '200px'
            setTimeout(() => {
                box.style.margin = '0 auto'
            }, 1000)
        })
        const btn = document.createElement('button')
        btn.innerHTML = '点击我'
        document.body.appendChild(btn)
        btn.onclick = function () {
            div.style.backgroundColor = 'blue'
            div.style.width = '200px'
            div.style.height = '200px'
            setTimeout(() => {
                div.style.backgroundColor = 'red'
                div.style.width = '100px'
                div.style.height = '100px'
                setTimeout(() => {
                    box.remove(div)
                }, 1000)
            }, 2000);

        }
        // 4.删除元素
        // box.removeChild(div)
        // box.remove(box)
    </script>
</body>

</html>